<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">
          <template v-slot:header>
            <div class="clearfix">
              <span>{{cardVal.visitCount}}</span>
            </div>
          </template>
          <div class="body">
            <p>浏览用户总数</p>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">
          <template v-slot:header>
            <div class="clearfix">
              <span>{{cardVal.loginCount}}</span>
            </div>
          </template>
          <div class="body">
            <p>登录用户总数</p>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">
          <template v-slot:header>
            <div class="clearfix">
              <span>{{cardVal.totalCount}}</span>
            </div>
          </template>
          <div class="body">
            <p>当前在线用户数</p>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="14" v-if="userType ==11 ||userType ==12">
        <el-card class="update-log magTop">
          <template v-slot:header>
            <div class="clearfix floRifht">
              <el-button :type="stateValA==0?'primary':''" @click="switchStaA(0)">日</el-button>
              <el-button :type="stateValA==0?'':'primary'" @click="switchStaA(1)">月</el-button>
            </div>
          </template>
          <div class="body">
            <line-chartA />
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="10" v-if="userType ==11 ||userType ==12">
        <el-card class="update-log magTop">
          <template v-slot:header>
            <div class="clearfix floRifht">
              <el-select v-model="commodityBVal" filterable placeholder="请选择商品" size="default"
                class="select">
                <el-option v-for="item in commodityList" :key="item.id" :label="item.name"
                  :value="item.id" />
              </el-select>
              <el-button :type="stateValB==0?'primary':''" @click="switchStaB(0)">日</el-button>
              <el-button :type="stateValB==0?'':'primary'" @click="switchStaB(1)">月</el-button>
            </div>
          </template>
          <div class="body">
            <line-chartB />
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="14" v-if="userType ==11 ||userType ==12">
        <el-card class="update-log magTop">
          <template v-slot:header>
            <div class="clearfix floRifht">
              <el-date-picker v-model="valueEchD" :clearable='false' type="date" placeholder="请选择时间"
                format="YYYY-MM-DD" value-format="YYYY-MM-DD" @change='switchStaD(0)' />
              <el-date-picker v-model="monthD" :clearable='false' type="month" placeholder="请选择月份"
                @change='switchStaD(1)' format="YYYY-MM" value-format="YYYY-MM" />
            </div>
          </template>
          <div class="body">
            <line-chartD />
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="10" v-if="userType ==11 ||userType ==12">
        <el-card class="update-log magTop">
          <template v-slot:header>
            <div class="clearfix floRifht">
              <el-select v-model="commodityEVal" @change='commodityESel' filterable
                placeholder="请选择商品" size="default" class="select">
                <el-option v-for="item in commodityList" :key="item.id" :label="item.name"
                  :value="item.id" />
              </el-select>
              <el-date-picker v-model="valueEchE" :clearable='false' type="date" placeholder="请选择时间"
                format="YYYY-MM-DD" value-format="YYYY-MM-DD" @change='switchStaE(0)' />
              <el-date-picker v-model="monthE" :clearable='false' type="month" placeholder="请选择月份"
                @change='switchStaE(1)' format="YYYY-MM" value-format="YYYY-MM" />
            </div>
          </template>
          <div class="body">
            <line-chartE />
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="14"
        v-if="userType ==11 ||userType==null ||userType ==12">
        <el-card class="update-log magTop">
          <template v-slot:header>
            <div class="clearfix floRifht">

              <el-select v-model="cangkuFVal" @change='cangkuFSel' filterable placeholder="请选择仓库"
                size="default" class="select">
                <el-option v-for="item in cangku" :key="item.id" :label="item.name"
                  :value="item.id" />
              </el-select>
              <el-button :type="stateValF==0?'primary':''" @click="switchStaF(0)">日</el-button>
              <el-button :type="stateValF==0?'':'primary'" @click="switchStaF(1)">月</el-button>
            </div>
          </template>
          <div class="body">
            <line-chartF />
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="10"
        v-if="userType ==11 ||userType==null ||userType ==12">
        <el-card class="update-log magTop">
          <template v-slot:header>
            <div class="clearfix floRifht">
              <el-select v-model="cangkuGVal" @change='cangkuGSel' filterable placeholder="请选择仓库"
                size="default" class="select">
                <el-option v-for="item in cangku" :key="item.id" :label="item.name"
                  :value="item.id" />
              </el-select>
              <el-select v-model="commodityGVal" filterable @change='commoditySel'
                placeholder="请选择商品" size="default" class="select">
                <el-option v-for="item in commodityList" :key="item.id" :label="item.name"
                  :value="item.id" />
              </el-select>
              <el-button :type="stateValG==0?'primary':''" @click="switchStaG(0)">日</el-button>
              <el-button :type="stateValG==0?'':'primary'" @click="switchStaG(1)">月</el-button>
            </div>
          </template>
          <div class="body">
            <line-chartG />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Index">
import {
  HomeCrde,
  EcartsCommSel,
  EcartsCangku,
  reminderPwd,
} from "@/api/indexHome";
import { ElMessageBox } from "element-plus";
const router = useRouter();
import LineChartA from "./echars/LineChartA.vue";
import LineChartB from "./echars/LineChartB.vue";
import LineChartD from "./echars/LineChartD.vue";
import LineChartE from "./echars/LineChartE.vue";
import LineChartF from "./echars/LineChartF.vue";
import LineChartG from "./echars/LineChartG.vue";

import useUserStore from "@/store/modules/user";
const userStore = useUserStore();

import {
  reactive,
  getCurrentInstance,
  computed,
  provide,
  ref,
  toRaw,
} from "vue";
const commodityList = ref([]);
const commodityBVal = ref("");
const cangku = ref([]);
// A
const stateValA = ref(0);
// B
const stateValB = ref(0);
// D
const stateValD = ref(0);
const valueEchD = ref(formatDate(new Date()));
const monthD = ref("");
const staFalsD = ref(false);
// E
const stateValE = ref(0);
const commodityEVal = ref("");
const valueEchE = ref(formatDate(new Date()));
const monthE = ref("");
const staFalsE = ref(false);
// F
const stateValF = ref(0);
const cangkuFVal = ref("");
const staFalsF = ref(false);
// G
const stateValG = ref(0);
const cangkuGVal = ref("");
const commodityGVal = ref("");
const staFalsG = ref(false);

const { proxy } = getCurrentInstance();

const userType = ref(userStore.userDta.userType);
const state = reactive({
  myDataA: { shopId: userStore.userDta.shopId, state: stateValA },
  myDataB: {
    shopId: userStore.userDta.shopId,
    state: stateValB,
    productId: commodityBVal,
  },
  myDataD: {
    state: stateValD,
    createTime: valueEchD,
    monthD: monthD,
    wareIds: userStore.userDta.ids,
    staFalsD: staFalsD,
  },
  myDataE: {
    state: stateValE,
    createTime: valueEchE,
    monthE: monthE,
    wareIds: userStore.userDta.ids,
    productId: commodityEVal,
    shopId: userStore.userDta.shopId,
    staFalsE: staFalsE,
  },
  myDataF: {
    state: stateValF,
    id: cangkuFVal,
    staFalsF: staFalsF,
  },
  myDataG: {
    state: stateValG,
    wareId: cangkuGVal,
    productId: commodityGVal,
    staFalsG: staFalsG,
  },
});

function formatDate(cellValue) {
  if (cellValue == null || cellValue == "") return "";
  var date = new Date(cellValue);
  var year = date.getFullYear();
  var month =
    date.getMonth() + 1 < 10
      ? "0" + (date.getMonth() + 1)
      : date.getMonth() + 1;
  var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
  return year + "-" + month + "-" + day;
}

provide(
  //若直接写state.myData无效，需加computed
  "parentDataA",
  computed(() => state.myDataA)
);
provide(
  //若直接写state.myData无效，需加computed
  "parentDataB",
  computed(() => state.myDataB)
);
provide(
  //若直接写state.myData无效，需加computed
  "parentDataD",
  computed(() => state.myDataD)
);
provide(
  //若直接写state.myData无效，需加computed
  "parentDataE",
  computed(() => state.myDataE)
);
provide(
  //若直接写state.myData无效，需加computed
  "parentDataF",
  computed(() => state.myDataF)
);
provide(
  //若直接写state.myData无效，需加computed
  "parentDataG",
  computed(() => state.myDataG)
);
const cardVal = ref({
  loginCount: 0,
  totalCount: 0,
  visitCount: 0,
});
function homcard() {
  HomeCrde().then((res) => {
    cardVal.value.loginCount = res.data.loginCount;
    cardVal.value.totalCount = res.data.totalCount;
    cardVal.value.visitCount = res.data.visitCount;
  });
}
function EcartsCangkuPost() {
  EcartsCangku(toRaw(userStore.userDta.ids)).then((res) => {
    cangku.value = res;
    cangkuFVal.value = res[0].id;
    cangkuGVal.value = res[0].id;
    staFalsF.value = !staFalsF.value;
    staFalsG.value = !staFalsG.value;
  });
}
function EcartsCommSelPost() {
  EcartsCommSel({
    id: userStore.userDta.shopId,
  }).then((res) => {
    commodityList.value = res;
    if (res.length != 0) {
      commodityBVal.value = res[0].id;
      commodityEVal.value = res[0].id;
      commodityGVal.value = res[0].id;
      staFalsE.value = !staFalsE.value;
    }
  });
}
EcartsCommSelPost();
EcartsCangkuPost();
homcard();
function switchStaA(sta) {
  stateValA.value = sta;
}
function switchStaB(sta) {
  stateValB.value = sta;
}
function switchStaF(sta) {
  stateValF.value = sta;
  staFalsF.value = !staFalsF.value;
}
function switchStaG(sta) {
  stateValG.value = sta;
  staFalsG.value = !staFalsG.value;
}
function switchStaD(sta) {
  if (sta == 0) {
    monthD.value = "";
  } else {
    valueEchD.value = "";
  }
  stateValD.value = sta;
  staFalsD.value = !staFalsD.value;
}
function switchStaE(sta) {
  if (sta == 0) {
    monthE.value = "";
  } else {
    valueEchE.value = "";
  }
  stateValE.value = sta;
  staFalsE.value = !staFalsE.value;
}
function commodityESel(e) {
  staFalsE.value = !staFalsE.value;
}
function cangkuFSel(e) {
  staFalsF.value = !staFalsF.value;
}
function cangkuGSel(e) {
  staFalsG.value = !staFalsG.value;
}
function commoditySel(e) {
  staFalsG.value = !staFalsG.value;
}

if (userStore.userDta.pwd == 0) {
  if (userStore.userDta.remark1 == null) {
    ElMessageBox.confirm("暂未设置密码 是否 去设置密码？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "忽略不在提醒",
      closeOnClickModal: false,
      distinguishCancelAndClose: true,
      type: "warning",
    })
      .then(() => {
        router.push({ path: "/user/profile" });
      })
      .catch((cancel) => {
        if (cancel == "cancel") {
          reminderPwd({
            phone: userStore.userDta.phone,
            remark1: "false",
          }).then((res) => {
            useUserStore()
              .getInfo()
              .then(() => {})
              .catch((err) => {});
          });
        }
      });
  }
}
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
  .floRifht {
    display: flex;
    justify-content: end;
    align-items: center;
  }
  .select {
    margin-right: 20px;
  }
  .magTop {
    margin-top: 20px;
  }
}
</style>

